<template>
  <view class="my-map" v-if="showMap">
    <view class="user-info">
      <text class="address-label">用户收货地址</text>
      <!-- :longitude="longitude_2"
        :latitude="latitude_2" -->
      <map
        @markertap="navigateTo"
        :include-points="markers"
        :scale="15"
        :markers="markers"
      ></map>
    </view>
  </view>
</template>
<!-- <script src="https://map.qq.com/api/js?v=2.0&key=WUJBZ-T6AHB-ZMUUK-JLYKS-KTG6T-NXB5M"></script> -->
<script>
export default {
  data() {
    return {
      longitude_2: 0,
      latitude_2: 0,
      markers: [],
      label: {
        padding: "4rpx 10rpx",
        bgColor: "#FFF",
        textAlign: "center",
        borderRadius: "4px"
      },
      showMap: true
    };
  },
  props: {
    order: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  created() {
    this.getMapLocation();
  },

  methods: {
    getMapLocation() {
      this.$allrequest.order
        .getLocation({
          order_id: this.order.order_id
        })
        .then((res) => {
          try {
            if (res.code == 0) {
              this.markers = [
                {
                  id: 1,
                  latitude: res.data.location.lat,
                  longitude: res.data.location.lng,
                  title: res.data.title,
                  label: {
                    ...this.label,
                    content: "我的位置"
                  }
                }
              ];

              if (res.data.rider) {
                let { lat, lng, distance } = res.data.rider;
                lat > 0 &&
                  this.markers.push({
                    id: 2,
                    latitude: lat,
                    longitude: lng,
                    title: "配送员位置",
                    label: {
                      ...this.label,
                      content: `配送员距离您${distance}`
                    }
                  });
              }

              // #ifdef WEB
              if (this.markers.length) {
                let icon = this.asyncImgs.admin.addr;
                this.markers.forEach((el) => {
                  el.iconPath = icon;
                });
              }
              // #endif

              this.latitude_2 = res.data.location.lat;
              this.longitude_2 = res.data.location.lng;
            }
          } catch (error) {
            this.showMap = false;
          }
        });
    },
    navigateTo(e) {
      const marker = this.markers.find((marker) => marker.id === e.markerId);
      uni.openLocation({
        latitude: marker.latitude,
        longitude: marker.longitude,
        scale: 18,
        name: marker.title
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.my-map {
  width: 100%;
  background: #ffffff;
  padding: 30rpx 24rpx;
  margin-bottom: 24rpx;
  border-radius: 20rpx;

  .address-label {
    margin-bottom: 20rpx;
    font-size: 30rpx;
    font-weight: bold;
    display: block;
  }
  .user-info {
    margin-bottom: 12rpx;
    overflow: hidden;
    height: 400rpx;
  }
}
map {
  width: 100% !important;
  height: 385rpx !important;
}
</style>
